import React from 'react';
import cass from 'classnames';
import s from './index.module.less';

export default function TitleItem({ title, icon, onClick, options = [], lineBreakShowOptionsNum, require }) {
    // 显示option按钮
    let btns = null;
    if (options.length) {
        btns = options.reduce((pre, v) => {
            if (v.show) return pre.concat(<div onClick={v.onClick} key={v.key}>{v.name}</div>)
            else return pre;
        }, []);
    }
    const breakShowBtns = btns && btns.length && lineBreakShowOptionsNum && (btns.length > lineBreakShowOptionsNum);
    return (
        <div className={s.wrap}>
            <div />
            <div className={cass(s.title, { [s.breakShow]: breakShowBtns })}>
                <h3>
                    {title || 'title'}
                    {require && <span className="require" />}
                </h3>
                {breakShowBtns ? <div className={s.breakwrap}>{btns}</div> : btns}
            </div>
            <div className={s.icon} onClick={onClick || null}>{icon}</div>
        </div>
    )
}